<template>
	<view class="container">
		<!-- <button @click="quit">退出</button> -->
		<view class="scan" @click="scanCode">
			<text class="iconfont iconjuanshu" style="font-size: 65rpx;color:#7153FF;"></text>
		</view>
		<view class="userInfo">
			<view class="userImg">
				<image @click="getuserinfo" v-if="user.avatarUrl == '' " src="cloud://cloud1-6gvg8052f9670276.636c-cloud1-6gvg8052f9670276-1305457435/flowHouse/editImg.png"></image>
				<image v-else :src="user.avatarUrl"></image>
			</view>
			<button @click="getuserinfo" v-if="user.avatarUrl == '' " class="userNameButton" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true" >点击登录</button>
			<view v-else class="userName">{{user.nickName}}</view>
			<view class="buttonList">
				<button @click="editUser">编辑信息</button>
				<button @click="scanCode">我要捐书</button>
			</view>
		</view> 
		<view class="list">
			<view class="listItem" @click="toSubmitList">
				<text class="iconfont iconxing1" style="font-size: 30px;color: #3C2B79;"></text>
				<view class="listTitle">捐书列表 · List</view>
			</view>
			<view class="listItem" @click="toMyBookList">
				<text class="iconfont iconxing" style="font-size: 30px;color: #3C2B79;"></text>
				<view class="listTitle">我的借阅 · Book</view>
			</view>
			<view class="listItem">
				<text class="iconfont iconxing1" style="font-size: 30px;color: #3C2B79;"></text>
				<view class="listTitle" @click="toFeedBack">留言 · Message</view>
			</view>
			<view class="listItem" @click="toAbout">
				<text class="iconfont iconxing" style="font-size: 30px;color: #3C2B79;"></text>
				<view class="listTitle">关于我们 · About us</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
			 		nickName: '',
					avatarUrl: ''
				},
				scanBook: {},
				BookIsbn: Number,
			}
		},
		onShow() {
			const userInfo = wx.getStorageSync('userInfo')
			console.log(userInfo)
			// if(userInfo.avatarUrl !== '') {
			// 	this.user = userInfo
			// }
		},   
		methods: {
			// 跳转到捐书列表
			toSubmitList () {
				wx.showToast({
					title: '敬请期待'
				})
			},
			// 跳转到我的借阅
			toMyBookList () {
				wx.navigateTo({
					url: '../myBookList/myBookList'
				})
			},
			// 退出
			quit() {
				wx.setStorageSync('userInfo', null)
				this.onShow()
			},
			// 登录
			getuserinfo() {
				wx.login({
				  success (res) {
				    if (res.code) {
				      //发起网络请求
					  console.log(res.code)
				      wx.request({
				        url: 'https://www.hl0203.com/user/login?code=' + res.code,
						method: 'POST',
						success(res) {
							console.log(res.data) 

						}
				      })
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    }
				  }
				})
						uni.getUserProfile({
										      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
										      success: (res) => {
												  this.user.name = res.userInfo.nickName
												  this.user.avatarUrl = res.userInfo.avatarUrl
												  wx.showToast({
												  	title: '登陆成功'
												  })
												  setTimeout(function (){
													  console.log(res.userInfo)
													  uni.setStorage({
													  						key: 'userInfo',
													  						data: res.userInfo
													  			 });
													   			 wx.showToast({
													  				 title: '登陆成功'
													  			 })
													  			 wx.navigateTo({
																		url: '../edit/edit?userInfo=' + JSON.stringify(res.userInfo)
													  			 })
												  }, 1000)
												  
										      },
											  })
					},
			login() {
				wx.login({ 
				  success (res) {
				    if (res.code) {
				      //发起网络请求
					  console.log(res.code)
				      wx.request({
				        url: 'https://www.hl0203.com/user/login?code='+ res.code,
						method: 'POST',
						success (res) {
						    console.log(res.data)
						  }
				      })
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    } 
				  }
				})
			},
			toAbout() {
				wx.navigateTo({
					url: '../aboutMe/aboutMe'
				})
			},
			scanInterface() {
				uni.showLoading({
				    title: '识别中...'
				});
				uni.request({
				    url: 'http://route.showapi.com/1626-1', //仅为示例，并非真实接口地址。
				    data: {
				        "showapi_timestamp": formatterDateTime(),
				        "showapi_appid": '622437', //这里需要改成自己的appid
				        "showapi_sign": '0289e087c21349ff9f87776bd580a0a8',  //这里需要改成自己的应用的密钥secret
				        "isbn":this.BookIsbn
				    },
				    header: {
				        'custom-header': 'hello', //自定义请求头信息
						'content-type': 'application/json'
				    },
				    success: (res) => {
						this.scanBook = res.data.showapi_res_body.data
				        console.log(this.scanBook);
				        this.text = 'request success';
						wx.navigateTo({
							url:'/pages/submitBook/submitBook?scanBook='+ JSON.stringify(this.scanBook)
						})
						uni.hideLoading()
				    },
					fail() {
						console.log("fail")
					}
				});
				function formatterDateTime() {
				var date=new Date()
				var month=date.getMonth() + 1
				var datetime = date.getFullYear()
				+ ""// "年"
				+ (month >= 10 ? month : "0"+ month)
				+ ""// "月"
				+ (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
				+ ""
				+ (date.getHours() < 10 ? "0" + date.getHours() : date.getHours())
				+ ""
				+ (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes())
				+ ""
				+ (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
				return datetime;
				}
			},
			// 扫码功能
			scanCode() {
				wx.showToast({
					title: '敬请期待'
				})
				return true
				uni.scanCode({
				    success: res => {
						this.BookIsbn = res.result;
						this.scanInterface()
				    }
				});
			},
			// 编辑个人信息
			editUser() {
			  const userInfo = wx.getStorageSync('userInfo')
			  console.log(userInfo)
			  if(userInfo.avatarUrl == '') {
			  	this.getuserinfo()
			  }else {
				  wx.navigateTo({
				  	url: '../edit/edit'
				  })
			  }
				
			},
			toFeedBack() {
				wx.navigateTo({
						url: '../feedBack/feedBack'
					})
				},
		}
	}
</script>

<style>
	.userInfo {
		width: 100%;
		margin-top: 2rpx;
	}
	.userImg , .userName{
		display: flex;    /*设置显示样式**/
		align-items: center;    /**子view垂直居中*/
		vertical-align: center; /**垂直居中*/
		justify-content: center; /**内容居中*/
	}
	.userImg{
	}
	.userImg image{
		width: 210rpx;
		height: 210rpx;
		border-radius: 100%;
		border: 5px solid #7153FF;
	}
	.userNameButton {
		width: 200rpx;
	    color: #3C2B79;
		font-weight: bold;
		margin-top: 20px;
		border-radius: 20rpx;
	}
	.userNameButton::after {
		  border: none;
		}
		.userName{
			width: 200rpx;
			color: #3C2B79;
			font-weight: bold;
			margin-top: 20px;
			left: 10%;
			margin-left: 320rpx;
			transform: translate(-20%, 0%);
		}
	.list{
		width: 100%;
		margin: 20px;
	}
	.listItem {
		width: 80%;
		display: flex;
		padding: 20px;
		border-radius: 20px;
		background-color: #F3F1FE;
		align-items: center;    /**子view垂直居中*/
		vertical-align: center; /**垂直居中*/
		margin-bottom: 24px;
	}
	.listTitle {
		font-size: 18px;
		font-weight: bold;
		color: #3C2B79;
		margin-left: 10px;
	}
	.scan{
		text-align: right;
		margin-right: 40rpx;
	}
	.buttonList{
		display: flex;
		margin-top: 40rpx;
		margin-bottom: 50rpx;
	}
	.buttonList button {
		border: none;
		background-color: #7153FF;
		color: white;
		font-size: 30rpx;
		border-radius: 25rpx;
		font-weight: bold;
		padding: 0rpx 25rpx;
		width: 220rpx;
	}
</style>
